import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { Link, useNavigate } from 'react-router-dom'
import { baseURL } from '../../utils/request'
import './index.scss'
import { getHousesAPI } from '../../apis/profile'
import HouseItem from '../../components/houseItem'

export default function Rent() {
    const navigate = useNavigate()
    const [housesList, setHousesList] = useState([])
    async function getHouses() {
        const res = await getHousesAPI()
        setHousesList(res.body)
    }
    function renderHouses() {
        return (
            housesList?.length > 0 ?
                <>
                    <div className='rent__tilte'>
                        你有{housesList.length}个房源，继续
                        <Link to={'/rent/add'}>发布房源</Link>
                        吧～
                    </div>
                    <div className='rent__houses'>
                        {housesList.map(item => (<HouseItem
                            onClick={() => navigate(`/detail/${item.houseCode}`)}
                            key={item.houseCode}
                            src={baseURL + item.houseImg}
                            title={item.title}
                            desc={item.desc}
                            tags={item.tags}
                            price={item.price}
                        />))}
                    </div>
                </>
                :
                <div className='rent__content'>
                    <img src={baseURL + '/img/not-found.png'} />
                    <div>
                        你还没有房源，去
                        <Link to={'/rent/add'}>发布房源</Link>
                        吧～
                    </div>
                </div>

        )


    }
    useEffect(() => {
        getHouses()
    }, [])
    return (
        <div className='rent'>
            <NavBar onBack={() => navigate('/me')} style={{ backgroundColor: '#eee' }}>房屋管理</NavBar>
            {renderHouses()}


        </div>
    )
}
